<template>
  <view>
    <!-- indicator-dots 指示面板 -->
    <!-- autoplay 自动播放 -->
    <!-- interval 衔接时长 -->
    <!-- circular 无缝滚动 -->
    <swiper indicator-dots autoplay interval="2000" circular>
      <block v-for="(item, index) in swiperList" :key="index">
        <swiper-item>
          <navigator :open-type="item.open_type" :url="item.navigator_url">
            <image :src="item.image_src" />
          </navigator>
        </swiper-item>
      </block>
    </swiper>

    <!-- 分类导航 -->
    <view class="cates">
      <block v-for="(item, index) in cateItems" :key="index">
        <navigator v-if="item.navigator_url" url="/pages/cates/cates" :open-type="item.open_type">
          <image :src="item.image_src"></image>
        </navigator>
        <image v-else :src="item.image_src"></image>
      </block>
    </view>

    <!-- 楼层区域 -->
    <view class="floorContainer">
      <!-- 每一个楼层 -->
      <view class="floorItem" v-for="(item, index) in floorList" :key="index">
        <!-- 楼层标题 -->
        <image class="floortitle" :src="item.floor_title.image_src"></image>

        <!-- 楼层图片 -->
        <view class="floorimgparent" v-for="(item, index) in item.product_list" :key="index">
          <!-- 在 uni-app 中， 如果绑定类名，绑定的 class 会把之前的 class 会覆盖 -->
          <image :class="'floorimgsrc floorimg' + index" :src="item.image_src" :style="'width:' + item.image_width + 'rpx'"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [], // 轮播图列表
      cateItems: [], // 分类数据
      floorList: [] // 楼层数据
    }
  },
  onLoad() {
    // 调用获取轮播图数据的方法
    this.getSwiperData()
    // 调用获取分类数据的方法
    this.getCateItems()
    // 调用获取楼层数据的方法
    this.getFloorList()
  },
  methods: {
    // 获取轮播图数据
    async getSwiperData() {
			
			const res = await this.request({
				url: '/home/swiperdata'
			})

			if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
					duration: 2000,
					icon: 'none'
        })
      }

			this.swiperList = res.message

      // const [err, { data: res }] = await uni.request({
      //   url: 'https://uinav.com/api/public/v1/home/swiperdata'
      // })
      
    },

    // 获取分类数据
    async getCateItems() {
      const res = await this.request({
        url: '/home/catitems'
      })

      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
					duration: 2000,
					icon: 'none'
        })
      }

      this.cateItems = res.message
    },

    // 获取楼层数据
    async getFloorList() {
      const res = await this.request({
        url: '/home/floordata'
      })

      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
					duration: 2000,
					icon: 'none'
        })
      }

      this.floorList = res.message
    }
  }
}
</script>

<style lang="less">
swiper {
  height: 375rpx;

  navigator,
  image {
    width: 750rpx;
    height: 100%;
  }
}

.cates {
  display: flex;
  justify-content: space-around;
  margin: 20rpx 0;

  image {
    width: 128rpx;
    height: 128rpx;
  }
}

.floorContainer {
  margin: 20rpx 0;
  
  .floortitle {
    width: 640rpx;
    height: 65rpx;
    display: block;
  }

  .floorimgparent {
    .floorimgsrc {
      float: left;
      height: 190rpx;
      margin: 0rpx 8rpx 8rpx 8rpx;
    }

    .floorimg0 {
      height: 390rpx;
    }
  }
}
</style>
